<template>
    <div class="searchContc">
        <div class="top">
            <div class="left">
                <div class="item" @click="binxz" :class="xzId==='0' ? 'item_x' : '' " id="0">综合</div>
                <div class="item" @click="binxz" :class="xzId==='2' ? 'item_x' : '' " id="2">收藏高</div>
                <div class="item" @click="binxz" :class="xzId==='3' ? 'item_x' : '' " id="3">学做多</div>
            </div>
            <!-- <div class="right">
                <div class="item" @click="binty" id="0" :class="tyId==='0' ? 'item_x' : '' ">笔记</div>
                <div class="item" @click="binty" id="1" :class="tyId==='1' ? 'item_x' : '' ">视频</div>
            </div> -->
        </div>
        <div>
        <div class="searchContBox" ref="searchContBox" @scroll="binScroll">
            <div ref="length">
            <div v-for="(item,i) in searchData" :key="i">
            <div class="searchConta"  v-if="item.type===13" @click="bint1(item.r.id)">
                <div class="left">
                    <img :src="item.r.img" alt="">
                </div>
                <div class="right">
                    <div class="title">{{item.r.n}}</div>
                    <div class="fenshu" v-if="item.r.rate!=0">{{item.r.rate | fenshu}}分</div>
                    <!-- <span v-if="item.r.recipe_list_tags[0].text!= undefined">{{item.r.recipe_list_tags[0].text}}</span> -->
                    <div class="user">
                        <div class="userImg">
                            <img :src="item.r.a.p" alt="">
                        </div>
                        <div class="userName">{{item.r.a.n}}</div>
                    </div>
                </div>
            </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'searchCont',
        data() {
            return {
                xzId:'0',
                tyId:'0',
                searchData:[],
                title:''
            }
        },
        created(){
            this.searchData = this.$route.query.searchData
            this.title = this.$route.query.title
        },
        methods:{
            binxz(e){
                this.xzId = e.target.id
                this.axios.get(`https://apis.netstart.cn/douguo/recipe/search?keyword=${this.title}&order=${Number(this.xzId)}&type=${Number(this.tyId)}&offset=0&limit=20`). then((response) => {
                    if (response.data.state=== "success") {
                        this.searchData =  response.data.result.list
                    }
                })
            },
            binScroll(){
                let length = this.searchData.length
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    if (this.$refs.length.scrollHeight-this.$refs.searchContBox.scrollTop===this.$refs.searchContBox.clientHeight) {
                        this.axios.get(`https://apis.netstart.cn/douguo/recipe/search?keyword=${this.title}&order=${Number(this.xzId)}&type=${Number(this.tyId)}&offset=${length}&limit=20`). then((response) => {
                            if (response.data.state=== "success") {
                                this.searchData.push(...response.data.result.list)  
                            }
                        })
                    }
                },300)
            },
            bint1(id){
                this.$router.push({name:'type1',query:{id}})
            },
            bint3(id){
                this.$router.push({name:'type3',query:{id}})
            }
        },
        filters: {
            fenshu: function (value) {
                value = Math.floor(value*100)/100
                return value
            }
        },
        watch:{
            "$route"(val,oldval){
                if(val.name =='searchCont'){
                    this.searchData = this.$route.query.searchData
                    this.title = this.$route.query.title
                }
            }
        },
        activated(){
            // this.searchData = JSON.parse(this.$route.query.searchData)
            // this.title = this.$route.query.title
            this.axios.get(`https://apis.netstart.cn/douguo/recipe/search?keyword=${this.title}&order=${Number(this.xzId)}&type=${Number(this.tyId)}&offset=0&limit=20`). then((response) => {
                if (response.data.state=== "success") {
                    this.searchData =  response.data.result.list
                }
            })
        }
    }
</script>

<style lang="less" scoped>
    .searchContc{
        padding: 0 10px;
        box-sizing: border-box;
        .top{
            display: flex;
            justify-content: space-between;
            .left{
                display: flex;
            }
            .right{
                display: flex;
            }
            .item{
                line-height: 30px;
                text-align: center;
                color: #8d8d8d;
                padding: 5px ;
            }
            .item_x{
                color: rgb(53, 53, 53);
                font-weight: 800;
            }
        }
        .searchContBox{
            height: calc(100vh - 86px);
            overflow: auto;
            .searchConta{
                display: flex;
                height: 130px;
                padding: 10px 0;
                .left{
                    height: 100%;
                    width: 160px;
                    img{
                        width: 160px;
                        height: 100%;
                        border-radius: 10px;
                    }
                }
                .right{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-left: 10px;
                    box-sizing: border-box;
                    .title{
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        font-size: 14px;
                        margin-bottom: 5px;
                    }
                    .fenshu{
                        color: #8d8d8d;
                    }
                    span{
                        padding: 1px;
                        color: #8d8d8d;
                        text-align: center;
                        background-color: #f3f3f3;
                        border-radius: 2px;
                        margin-top: 5px;
                    }
                    .user{
                        margin-top: 10px;
                        display: flex;
                        height: 18px;
                        .userImg{
                            height: 100%;
                            img{
                                height: 100%;
                                border-radius: 50%;
                            }
                        }
                        .userName{
                            color: #8d8d8d;
                            line-height: 18px;
                            padding-left: 2px;
                        }
                    }
                }
            }
        }
    }
</style>